<template>
  <div class="bag-container">
    <div
      :class="['bag', { bagRabbitBG: isRabbitBG }]"
      :style="{
        top: `${item.top}px`,
        left: `${item.left}`,
        transform: `rotate(${item.deg}deg)`,
      }"
      v-for="(item, i) in bags"
      :key="i"
      @click="handleBagClick(i, item)"
      v-show="item.show"
    ></div>

    <div class="popup welcome" v-show="!isStart">
      <img
        src="https://clemmensen.top/static/rabbit1.png"
        alt=""
        class="rabbit rabbit1"
      />
      <div class="txt">红包雨即将来袭，<br />准备好了吗？</div>
      <div class="btn" @click="gameStart">准备好了</div>
    </div>

    <div class="bags-detail" v-if="gameover">
      <div class="bags-detail-btn" @click="handleBagsDetail">
        查看获得的红包
      </div>
    </div>

    <div class="copyright">
      Copyright © 2023 by
      <a href="https://juejin.cn/user/3773179637278727" target="_blank">觅迹</a>
      . All Rights Reserved.
    </div>

    <div class="txt-right">
      <div
        :class="['txt', { 'txt-active': index === textIndex }]"
        v-for="(item, index) in txtList"
        :key="index"
        @click="changeIndex(index)"
      >
        {{ item }}
      </div>
    </div>

    <div class="overlay" v-show="showPopup || showBagsGet"></div>
    <div class="popup" v-show="showPopup">
      <div class="p1" v-if="showP1">
        <img
          src="https://clemmensen.top/static/rabbit1.png"
          alt=""
          class="rabbit rabbit2"
        />
        <div class="t1">{{ curBag.from }}的红包</div>
        <div class="t2">新年快乐，前兔似锦</div>
        <div
          :class="[
            'open',
            'downUp',
            {
              rotate: isRotate,
            },
          ]"
          @click="openBagFn"
        >
          開
        </div>
        <div class="circle"></div>
      </div>
      <div class="p2" v-else>
        <div class="t1">{{ curBag.from }}的红包</div>
        <div class="money">
          <div class="num" v-if="curBag.money > 0">
            {{ curBag.money / 100 }}元
          </div>
          <div class="num thanks" v-else>{{ curBag.desc }}</div>
        </div>
        <div class="desc">注：红包请找官方进行兑现 =_=!</div>
        <div class="circle"></div>
        <div class="sure" @click="showPopup = false">确定</div>
      </div>
    </div>
    <div class="popup" v-show="showBagsGet">
      <div class="bags-get-title">红包详情</div>
      <template v-if="bagsGet.length === 0">
        <div class="bag-empty">还没有获得红包哦~</div>
        <div class="sure" @click="showBagsGet = false">确定</div>
      </template>
      <template v-else>
        <div class="bag-get-list">
          <div v-for="(item, i) in bagsGet" :key="i" class="bag-get">
            <template v-if="item.money > 0">
              {{ `${item.money / 100}元 -- 来自 ${item.from}` }}
            </template>
            <template v-else>
              {{ `${item.desc} -- 来自 ${item.from}` }}
            </template>
          </div>
        </div>
        <div class="desc desc2">注：红包请找掘金官方进行兑现 =_=!</div>
        <div class="sure" @click="showBagsGet = false">确定</div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs, reactive } from 'vue';

const txtList = ref(['红包雨', '兔子雨']);
const textIndex = ref(0);
const bags = ref([]);
const bagsGet = ref([]);
const bagsNum = ref(20);
const maxH = ref(500);
const maxW = ref(90);
const step = ref(10);
const showPopup = ref(false);
const showBagsGet = ref(false);
const idx = ref(-1);
const isRotate = ref(false);
const showP1 = ref(true);
const isStart = ref(false);
const gameover = ref(false);
const prizeRatio = ref(0.75);
const isRabbitBG = ref(0);
const data = reactive({
  curBag: {},
});
const { curBag } = toRefs(data);

const changeIndex = (index) => {
  textIndex.value = index;
  isRabbitBG.value = index === 1;
};
const gameStart = () => {
  isStart.value = true;
  init();
};
const init = () => {
  let count = 0;
  let countT = setInterval(() => {
    if (count >= bags.valueNum) {
      clearInterval(countT);
      gameover.value = true;
      return;
    }
    createBag(count);
    count++;
  }, 500);
};
const createBag = (i) => {
  let ran = Math.random();
  let money = Math.floor(ran * 1001);
  let desc = '';
  if (ran > prizeRatio.value) {
    money = 0;
    desc = '谢谢参与！';
  }
  let deg = 0;
  if (isRabbitBG.value) {
    deg = Math.floor(ran * 30);
    if (ran > 0.5) {
      deg *= -1;
    }
  }
  let param = {
    index: i,
    money,
    desc,
    from: '荒',
    top: 0,
    left: `${Math.floor(Math.random() * maxW.value)}vw`,
    deg,
    show: true,
  };
  bags.value.push(param);
};
const openBagFn = () => {
  isRotate.value = true;
  setTimeout(() => {
    isRotate.value = false;
    showP1.value = false;
  }, 1500);
};
const handleBagClick = (i, item) => {
  console.log(i, item);
  idx.value = i;
  item.show = false;
  showPopup.value = true;
  showP1.value = true;
  curBag.value = item;
  bagsGet.value.push(item);
};
const handleBagsDetail = () => {
  showBagsGet.value = true;
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0px;
}
.rabbit {
  width: 100px;
  height: 80px;
}
.txt-right {
  cursor: pointer;
  position: fixed;
  top: 200px;
  right: 20px;
  color: #aaa;
  .txt {
    margin-bottom: 10px;
  }
  .txt-active {
    color: #ff0;
  }
  .clear {
    color: #aaa;
    padding-top: 10px;
    border-top: 1px dashed;
  }
}

.bag-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  .bag {
    width: 30px;
    height: 50px;
    background: linear-gradient(to bottom, #ff6a00, #ee0979);
    position: absolute;
    animation: downBags 6s forwards linear;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
  }
  .bagRabbitBG {
    width: 70px;
    background: url(https://clemmensen.top/static/rabbit1.png) center / cover
      no-repeat;
  }
  .bags-detail {
    text-align: center;
    color: #ff6a00;
    font-weight: 500;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    .bags-detail-btn {
      cursor: pointer;
      width: 150px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
  }
  .welcome {
    .rabbit1 {
      position: absolute;
      top: -40px;
      left: -30px;
      transform: rotate(-20deg);
    }
    .txt {
      color: #fff;
      font-size: 22px;
      font-weight: 600;
      font-family: 'Microsoft Yahei';
      margin: 80px 20px;
      text-align: center;
      line-height: 28px;
    }
    .btn {
      color: #fff;
      border-radius: 10px;
      width: 100px;
      height: 40px;
      border: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      font-weight: 500;
      margin-top: 10px;
      cursor: pointer;
    }
  }
  .copyright {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    color: #ccc;
    z-index: 0;
    user-select: none;
  }
}

// 红包的下落动画
@keyframes downBags {
  0% {
    top: 0;
  }
  100% {
    top: 110vh; // 100vh
  }
}
// 上下移动
@keyframes downUpAni {
  0% {
    bottom: 40px;
  }
  75% {
    bottom: 50px;
  }
  100% {
    bottom: 40px;
  }
}
// 旋转效果
@keyframes rotateAni {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
.downUp {
  animation: downUpAni 3s infinite linear;
}
.rotate {
  animation: rotateAni linear 0.3s infinite;
}
.popup {
  width: 250px;
  height: 420px;
  background: linear-gradient(to bottom, #ff6a00, #ee0979);
  border: 1px solid #ccc;
  border-radius: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  .rabbit2 {
    position: absolute;
    top: 160px;
    left: 70px;
  }
  .t1 {
    text-align: center;
    margin-top: 50px;
    color: #fdd798;
  }
  .t2 {
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    color: #fdd798;
  }
  .money {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    color: #fdd798;
    .num {
      text-align: center;
      font-size: 40px;
      font-weight: 500;
    }
    .thanks {
      font-size: 20px;
    }
  }
  .desc {
    width: 100%;
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    margin-top: 150px;
    color: #f7db0a;
  }
  .desc2 {
    bottom: 80px;
  }
  .sure {
    text-align: center;
    color: #fdd798;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
  .open {
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 500;
    background-color: #fdd798;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    z-index: 2;
    user-select: none;
    cursor: pointer;
  }
  .circle {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 50px;
    border: 2px solid #bbb;
    border-radius: 50%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background-color: transparent;
  }

  .bags-get-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-top: 30px;
    color: #fdd798;
  }
  .bag-empty {
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
    color: #fdd798;
  }
  .bag-get-list {
    height: 230px;
    overflow-y: scroll;
    .bag-get {
      text-align: center;
      font-size: 16px;
      margin-top: 10px;
      color: #fdd798;
    }
  }
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
</style>
